<template>
  <div style="height: 542px" class="all">
    <div class="head">
      <div class="title">人效排名（月度）</div>
      <!-- v-model的值为当前被选中的el-option的 value 属性值 -->
      <el-select v-model="regionId" @change="renderRank" placeholder="请选择">
        <el-option
          v-for="item in regionOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="toggleRole">
      <div
        class="toggleItem"
        @click="toggleRoleType(false)"
        :class="{ isCheck: !isRepair }"
      >
        运营人员
      </div>
      <div
        class="toggleItem"
        @click="toggleRoleType(true)"
        :class="{ isCheck: isRepair }"
      >
        运维人员
      </div>
    </div>
    <div class="body">
      <div class="empty" v-if="isEmpty">
        <el-empty
          image="http://likede2-admin.itheima.net/img/empty.87c4f71b.png"
          description="暂无数据"
        ></el-empty>
      </div>
      <div class="echart" v-else></div>
    </div>
  </div>
</template>

<script>
import { getRegionList, getUserWorkerTop } from '@/api/person'
export default {
  props: ['monthStart', 'today'],
  data () {
    return {
      regionOptions: [{ value: '0', label: '全部' }],
      regionId: '0',
      isRepair: false,
      isEmpty: true
    }
  },
  async created () {
    // 获取下拉菜单区域列表
    const { currentPageRecords } = await getRegionList()
    currentPageRecords.forEach((item) => {
      const obj = {}
      obj.label = item.name
      obj.value = item.id
      this.regionOptions.push(obj)
    })
    // 渲染排名
    this.renderRank()
  },
  methods: {
    toggleRoleType (type) {
      this.isRepair = type
      this.renderRank()
    },
    async renderRank () {
      // 返回值是数组
      const res = await getUserWorkerTop(
        this.monthStart,
        this.today,
        this.isRepair,
        this.regionId
      )
      this.isEmpty = !res.length
    }
  }
}
</script>

<style scoped lang="scss">
.all {
  display: flex;
  flex-direction: column;
  .head {
    height: 34px;
    line-height: 34px;
    display: flex;
    justify-content: space-between;
    .title {
      color: #333;
      font-size: 16px;
      font-weight: 600;
    }
  }
  .el-select {
    ::v-deep .el-input__inner {
      width: 88px;
      height: 32px;
    }
  }
  .toggleRole {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 178px;
    height: 34px;
    margin: 20px auto;
    background: rgba(233, 243, 255, 0.37);
    border-radius: 10px;
    .toggleItem {
      width: 78px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      font-size: 14px;
      color: #9ca3b4;
      cursor: pointer;
    }
    .isCheck {
      border-radius: 7px;
      font-weight: 600;
      color: #333;
      background-color: #fff;
      box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
    }
  }
  .body {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    ::v-deep img {
      width: 123px;
      height: 96px;
    }
    ::v-deep p {
      margin-top: 25px;
      color: #20232a;
      font-size: 14px;
    }
  }
}
</style>
